<template>
	<div class="box_wrap">
		<ShowSlider 
		ref="showslider"
		:showText="showText"
		@editriqi = "editriqi"
		@back="back"
		@editback="editback"
		></ShowSlider>
		<div class="showinfo_box"
			ref="showout"
		>
			<!-- 滑块组件 -->
			<Slider 
				ref = "slider"
				@slider="slider"
			></Slider>
			<!-- 用户名组件 -->
			<UserName 
				ref = "username"
				:username="username"
			></UserName>
			
			<!-- 用户信息组件 -->
			<div 
				v-infinite-scroll="loadMore"
  				infinite-scroll-disabled="loading"
  				infinite-scroll-distance="50"
				class="showinfo_box">
				<ShowInfo 
					v-if="userInfos.length"
					ref = 'showinfo'
					v-for="(userInfo,index) in userInfos"
					:key="userInfo.id"
					:path="userInfo.path"
					:date="userInfo.date"
					:height="height"
					:width="width"
					@editicon="editicon(userInfo)"
					@right="right(userInfo)"
				></ShowInfo>
			</div>
		</div>
		<LoadMore :value="moreVal" v-if="moreShow"></LoadMore>
	</div>
</template>

<script type="text/javascript">
// eslint-disable-next-line
/* eslint-disable */
import UserName from "../components/username.vue"
import ShowInfo from "../components/showInfo.vue"
import Slider from "../components/Slider.vue"
import ShowSlider from "../components/showSlider.vue"
import { requestAnimationFrame } from "../../common/js/requestAnimationFrame.js"
import { cancelAnimationFrame } from "../../common/js/cancelAnimationFrame.js"
import { InfiniteScroll } from 'mint-ui';
import Vue from "vue"
import LoadMore from "../components/loadMore.vue" 
import { mixinGetUserInfoList } from '../mixin.js'
Vue.use(InfiniteScroll);
export default {
	name: 'showinfo',
	mixins: [mixinGetUserInfoList],
	components: {
		UserName,
		ShowInfo,
		Slider,
		ShowSlider,
		LoadMore
	},
	data() {
		return {
			page: 1,
			count: 6,
			loading:false,
			moreVal: '加载中...',
            moreShow: false,
			flag: 'slider',
			touch: {},
			showText: true,
			username: !localStorage.getItem('username')?"Ken":localStorage.getItem("username"),
			height: 83,
			width: 84,
			userInfos:[
				// {
				// 	id: 1,
				// 	path: "http://placebeard.it/83/84/notag",
				// 	date: '2018/12/23'
				// },
			],
			originInfos:[],
		}
	},
	methods: {
		loadMore() {
  			this.page++;
  			this.getUserInfoList();
  		},
		back() {
			localStorage.clear()
			this.$router.push({
				name: 'login'
			})
		},
		right(userinfo) {
			this.$router.push({
				name: 'info',
				params: {
					id: userinfo.id
				}
			})
		},
		slider() {
			this.flag = "slider"
			this.move(this.flag)
		},
		editicon(userinfo) {
			this.$router.push({
				name: 'editinfo',
				params:{
					id: userinfo.id
				}
			})

		},
		editriqi() {
			console.log('editriqi')
			this.$router.push({
				name: 'editriqi'
			})
		},
		editback() {
			this.flag = "editback"
			console.log("editback")
			this.move(this.flag)
		},
		move(flag) {
			console.log('111')
			var vSlider = this.$refs.slider.$refs.slider;
			var vShowSlider = this.$refs.showslider.$refs.showslider
			var timer = null;
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn(){
		        if(flag==="slider"){
		        	if(parseInt(vShowSlider.offsetLeft) < 0){
			        	timer = requestAnimationFrame(fn);
			            vShowSlider.style.left = parseInt(vShowSlider.offsetLeft) + 50 + 'px';
			        }else{
			            cancelAnimationFrame(timer);
			            vShowSlider.style.left = 0
			        }  
		        }else{
		        	if(parseInt(vShowSlider.offsetLeft) >= 0){
			        	timer = requestAnimationFrame(fn);
			            vShowSlider.style.left = parseInt(vShowSlider.offsetLeft) - 50 + 'px';
			        }else{
			            cancelAnimationFrame(timer);
			            vShowSlider.style.left = '-65%'
			        }
		        }
		    });
		},
		middleTouchStart(e){
			this.touch['initiated'] = true;
			var touches = e.touches[0]
			this.touch['startX'] = touches.pageX
			this.touch['startY'] = touches.pageY
		},
		middleTouchMove(e){
			console.log('middleTouchMove')
			// 如果我们没有touchstart
	        // 就什么都不做
	        if(!this.touch.initiated){
	          return ;
	        }
	        var vShowSlider = this.$refs.showslider.$refs.showslider
	        var vShowout = this.$refs.showout;
	        // 保存touchmove的东西
	        const touches = e.touches[0];
	        this.touch.endX = touches.pageX;
	        this.touch.endY = touches.pageY;
	        let deltaX = this.touch.endX - this.touch.startX;
	        let deltaY = this.touch.endY - this.touch.startY;
	        // 我们要判断如果纵向deltaY的绝对值大于横向deltaX时，我们什么都不做
	        if(Math.abs(deltaY)>Math.abs(deltaX)){
	          return ;
	        }
	        var vShowSliderleft = deltaX>0?'100%':'0px'
	        vShowSlider.style['transform'] = `translate3d(${vShowSliderleft},0,0)`;
	        vShowSlider.style['transtionDuration'] = '0ms';
		},
		middleTouchEnd(e){
		}
	}
}
</script>

<style lang="scss" scoped>
@import "../../public/sass/var.scss";
.showinfo_box{
	background-color: $accountcolor;
	.showinfo{
		position: relative;
		padding: 10px;
	}
	
}	
</style>